<template>
	<view>
		<view class="flex justify-around" style="height: 50rpx">
			<view class="font-md" v-for="(item, index) in tarlist" :key="index" @click="changetar(index)" :class="tarIndex === index ? 'font-weight-bolder text-main' : ''">
				{{ item.title }}
				<text v-if="item.count !== 0" class="ml-2">{{ item.count }}</text>
			</view>
		</view>
		<swiper :current="tarIndex" @change="swiperchange" :style="{ height: height + 'px' }">
			<swiper-item v-for="(item, index) in newlist" :key="index">
				<view v-if="item.list.length !== 0">
					<scroll-view scroll-y :style="{ height: height + 'px' }" @scrolltolower="loadmore(index)">
						<block v-for="(item2, index2) in item.list" :key="index2">
							<friendlist :item3="item2" :index="index2"></friendlist>
						</block>
						<loadmore v-if="item.list.length > 10" :loadmore="item.loadmore"></loadmore>
					</scroll-view>
				</view>
				<!-- 没数据时显示的图片 -->
				<view class="flex justify-center mt-5" v-else-if="!Loginstatus">请先登录.....</view>
				<view v-else>
					<noThing></noThing>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import friendlist from '@/compoment/user-list/friendlist.vue';
import { eachOther, followers, concern } from '@/request/Api/user.js';
import { getuserpage } from '@/request/Api/user.js';
export default {
	data() {
		return {
			tarlist: [
				{ title: '互关', count: 0 },
				{ title: '关注', count: 0 },
				{ title: '粉丝', count: 0 }
			],
			tarIndex: 0,
			newlist: [],
			Loginstatus: false,
			userId: 0
		};
	},
	onPullDownRefresh() {
		if (!this.Loginstatus) {
			return uni.stopPullDownRefresh();
		}
		if (this.tarIndex === 0) {
			this.newlist.splice(0, 1, {
				loadmore: '上拉加载更多',
				list: [],
				page: 1,
				isloading: false
			});
			this.geteachother(true);
		}
		if (this.tarIndex === 1) {
			this.newlist.splice(1, 1, {
				loadmore: '上拉加载更多',
				list: [],
				page: 1,
				isloading: false
			});
			this.getconcern(1, true);
		}
		if (this.tarIndex === 2) {
			this.newlist.splice(2, 1, {
				loadmore: '上拉加载更多',
				list: [],
				page: 1,
				isloading: false
			});
			this.getfollowers(2, true);
		}
	},
	onShow() {
		getuserpage({ userId: this.userId }).then((res) => {
			this.tarlist[0].count = res.data.friendNum;
			this.tarlist[1].count = res.data.followNum;
			this.tarlist[2].count = res.data.fenshiNum;
		});
	},
	onLoad() {
		// 这里获取的是去掉标题和tarbar剩余的屏幕的高度
		const userinfo = uni.getStorageSync('userInfo');
		this.userId = userinfo.id;
		if (userinfo) {
			this.Loginstatus = true;
		}
		if (this.Loginstatus) {
			getuserpage({ userId: userinfo.id }).then((res) => {
				this.tarlist[0].count = res.data.friendNum;
				this.tarlist[1].count = res.data.followNum;
				this.tarlist[2].count = res.data.fenshiNum;
			});
		}
		uni.getSystemInfo({
			success: (res) => {
				this.width = res.windowWidth;
				this.height = res.windowHeight - res.statusBarHeight - uni.upx2px(50);
			}
		});
		uni.$on('followOrdosupport', (res) => {
			if (res.type === 'follow') {
				this.newlist.forEach((item, index) => {
					item.list.forEach((item2, index2) => {
						if (item2.followId === parseInt(res.userId)) {
							item2.isFollow = res.num;
							getuserpage({ userId: this.userId }).then((res) => {
								this.tarlist[0].count = res.data.friendNum;
								this.tarlist[1].count = res.data.followNum;
								this.tarlist[2].count = res.data.fenshiNum;
							});
						}
					});
				});
			}
		});
		this.getdata();
	},
	onUnload() {
		uni.$off('followOrdosupport', (res) => {});
	},
	methods: {
		getdata() {
			for (let i = 0; i < this.tarlist.length; i++) {
				let obj = {
					loadmore: '上拉加载更多',
					list: [],
					page: 1,
					isloading: false
				};
				this.newlist.push(obj);
			}
			this.geteachother(false);
		},
		geteachother(isref) {
			console.log(isref)
			if (this.Loginstatus && !this.newlist[0].isloading) {
				uni.showLoading({
					title: '请稍后...'
				});
				eachOther({ current: this.newlist[0].page }).then((res) => {
					this.newlist[0].list = res.data.map((v) => {
						return {
							age: v.age,
							nickName: v.nikeName,
							userpic: v.userPic,
							isFollow: v.isFollow,
							followId: v.followId,
							sex: v.sex // 0未知 1女 2男
						};
					});
					this.newlist[0].isloading = true;
					if (res.data.length < 10) {
						this.newlist[0].loadmore = '没有更多数据了';
					} else {
						this.newlist[0].loadmore = '上拉加载更多';
						this.newlist[0].page++;
					}
					if (isref) {
						uni.stopPullDownRefresh();
					}
				});
			}
		},
		getconcern(index, isref) {
			if (this.Loginstatus && !this.newlist[index].isloading) {
				uni.showLoading({
					title: '请稍后...'
				});
				concern({ current: this.newlist[index].page }).then((res) => {
					console.log(res.data);
					this.newlist[index].list = res.data.map((v) => {
						return {
							age: v.age,
							nickName: v.nikeName,
							userpic: v.userPic,
							isFollow: v.isFollow,
							followId: v.followId,
							sex: v.sex // 0未知 1女 2男
						};
					});
					this.newlist[index].isloading = true;
					if (res.data.length < 10) {
						this.newlist[index].loadmore = '没有更多数据了';
					} else {
						this.newlist[index].loadmore = '上拉加载更多';
						this.newlist[index].page++;
					}
					if (isref) {
						uni.stopPullDownRefresh();
					}
				});
			}
		},
		getfollowers(index, isref) {
			if (this.Loginstatus && !this.newlist[index].isloading) {
				followers({ current: this.newlist[index].page }).then((res) => {
					console.log(res.data);
					this.newlist[index].list = res.data.map((v) => {
						return {
							age: v.age,
							nickName: v.nikeName,
							userpic: v.userPic,
							isFollow: v.isFollow,
							followId: v.followId,
							sex: v.sex // 0未知 1女 2男
						};
					});
					this.newlist[index].isloading = true;
					if (res.data.length < 10) {
						this.newlist[index].loadmore = '没有更多数据了';
					} else {
						this.newlist[index].loadmore = '上拉加载更多';
						this.newlist[index].page++;
					}
					if (isref) {
						uni.stopPullDownRefresh();
					}
				});
			}
		},
		changetar(index) {
			this.tarIndex = index;
		},
		//点击导航栏，跳转到对应的内容
		selct(index) {
			this.tarIndex = index;
		},
		//滑动下面的页面相应改变导航栏
		swiperchange(e) {
			this.selct(e.detail.current);
			const index = e.detail.current;
			if (index === 1) {
				this.getconcern(index, false);
			} else {
				this.getfollowers(index, false);
			}
		},
		loadmore(index) {
			let item = this.newlist[index];
			// 这里应该判断一下，不能让用户一直上拉加载，这样服务器的压力很大
			if (item.loadmore !== '上拉加载更多') {
				return;
			}
			item.loadmore = '加载中';
			if (index === 0) {
				eachOther({ current: this.newlist[0].page }).then((res) => {
					const list = res.data.map((v) => {
						return {
							age: v.age,
							nickName: v.nikeName,
							userpic: v.userPic,
							isFollow: v.isFollow,
							followId: v.followId,
							sex: v.sex // 0未知 1女 2男
						};
					});
					this.newlist[0].list = [...this.newlist[0].list, ...list];
					this.newlist[0].isloading = true;
					if (res.data.length < 10) {
						this.newlist[0].loadmore = '没有更多数据了';
					} else {
						this.newlist[0].loadmore = '上拉加载更多';
						this.newlist[0].page++;
					}
				});
			}
			if (index === 1) {
				concern({ current: this.newlist[index].page }).then((res) => {
					const list = res.data.map((v) => {
						return {
							age: v.age,
							nickName: v.nikeName,
							userpic: v.userPic,
							isFollow: v.isFollow,
							followId: v.followId,
							sex: v.sex // 0未知 1女 2男
						};
					});
					this.newlist[index].list = [...this.newlist[index].list, ...list];
					this.newlist[index].isloading = true;
					if (res.data.length < 10) {
						this.newlist[index].loadmore = '没有更多数据了';
					} else {
						this.newlist[index].loadmore = '上拉加载更多';
						this.newlist[index].page++;
					}
				});
			}
			if (index === 2) {
				followers({ current: this.newlist[index].page }).then((res) => {
					const list = res.data.map((v) => {
						return {
							age: v.age,
							nickName: v.nikeName,
							userpic: v.userPic,
							isFollow: v.isFollow,
							followId: v.followId,
							sex: v.sex // 0未知 1女 2男
						};
					});
					this.newlist[index].list = [...this.newlist[index].list, ...list];
					this.newlist[index].isloading = true;
					if (res.data.length < 10) {
						this.newlist[index].loadmore = '没有更多数据了';
					} else {
						this.newlist[index].loadmore = '上拉加载更多';
						this.newlist[index].page++;
					}
				});
			}
		}
	},
	onNavigationBarButtonTap() {
		uni.navigateBack({
			delta: 1
		});
	},
	onNavigationBarSearchInputClicked() {
		uni.navigateTo({
			url: '/pages/search/search?type=好友'
		});
	},
	components: { friendlist }
};
</script>

<style>
page {
	box-sizing: border-box;
}
</style>
